import React, {PureComponent} from 'react'
import World from '../component/chart/world'
import LineChart from '../component/chart/line'
import ChinaMap from '../component/chart/index-china-map'
import Dash from '../component/chart/dash'
import Energy from '../component/chart/energy'
import Temper from '../component/chart/temper'
import Product from '../component/chart/product'
import ProductDelivery from '../component/index/product-delivery'
import Device from '../component/index/device'
import OrderRate from '../component/index/orderRate'
import Head from './head'
import {
    getWorldOrder,
    getChinaOrder,
    getRate,
    getFpy,
    getDeliveryCount,
    getProductionCount,
    getChinaLine
} from '../action/map.action'
import {scale} from '../component/chart/util/common'
import {connect} from 'react-redux'
import echarts from 'echarts';
import {millToString, millToDate} from '../util/util'

class Stat extends PureComponent {
    componentDidMount() {
        const {dispatch} = this.props
        /*获取全球发货*/
        dispatch(getWorldOrder())
        /*国内订单占比*/
        dispatch(getChinaOrder())
        /*中国区端到端及时交付率*/
        dispatch(getRate())
        /*周一次合格率*/
        dispatch(getFpy({type: '周单板'}))
        dispatch(getFpy({type: '周整机'}))
        dispatch(getFpy({type: '单板实时'}))
        dispatch(getFpy({type: '整机实时'}))
        dispatch(getFpy({type: '整机实时全部'}))
        dispatch(getFpy({type: '单板实时全部'}))
        /*获取发货数量统计*/
        dispatch(getDeliveryCount())
        /*获取产出数量统计*/
        dispatch(getProductionCount())
        dispatch(getChinaLine())
    }

    render() {
        const {
            orderRate, once, signalTime, completeTime,
            signalTimeAll, completeTimeAll
        } = this.props


        return (
            <div className="index-container">
                {/*<Head link={{href:'/frame.html',title:'进入管理模块'}}/>*/}
                <div className="top-part">
                    <div className="left-container">
                        <p className="chart-title-left">
                            海外发货分布图
                        </p>
                        {/*海外发货分布图*/}
                        <div className="index-map-chart">
                            <World/>
                        </div>
                        {/*耗能*/}
                        <Energy/>
                    </div>
                    <div className="center-container">
                        {/*产出和发货*/}
                        <div style={{width: '100%', height: '32%'}}>
                            <ProductDelivery/>
                        </div>
                        {/*设备*/}
                        <div style={{width: '100%', height: '50%'}}>
                            <Device/>
                        </div>
                        {/*今日订单*/}
                        <div style={{width: '100%'}}>
                            <Product/>
                        </div>
                    </div>
                    <div className="right-container">
                        <p className="chart-title-right">
                            全国发货分布图
                        </p>
                        <ChinaMap/>
                        {/* 温湿度 */}
                        <Temper/>
                    </div>
                </div>

                <div className="bottom-part">
                    {/*单板实时一次合格率*/}
                    <div className="index-bottom-left">
                        <Dash data={signalTime} all={signalTimeAll}/>
                    </div>
                    <div className="index-bottom-center">
                        {/*中国区端到端及时交付率*/}
                        <div className="index-bottom-center-chart">
                            <OrderRate/>
                        </div>
                        {/*周单板和整机一次合格率*/}
                        <div className="index-bottom-center-chart">
                            <LineChart config={once}/>
                        </div>
                    </div>
                    {/*整机实时一次合格率*/}
                    <div className="index-bottom-right">
                        <Dash data={completeTime} all={completeTimeAll}/>
                    </div>
                </div>
            </div>
        )
    }
}

function mapStoreToProps({fpy}) {
    const {signalWeek, completeWeek, signalTime, completeTime, signalTimeAll, completeTimeAll} = fpy
    const onceProps = {
        title: '周单板和整机一次合格率',
        xAxisData: signalWeek['全部'] ? signalWeek['全部'].values.map(s => millToDate(s.dt)) : [],
        legend:['单板','整机'],
        option: {
            yAxis: {
                min: 95,
                max: 100,
            },
            title: {
                textStyle: {
                    color: '#5BE2EF',
                    fontSize: 14 * scale,
                    fontWeight: 'bolder'
                }
            },
            series: [{
                name: '单板',
                itemStyle: {
                    normal: {
                        color: 'rgba(103, 168, 14, 1)',
                        // borderColor: 'rgba(103, 168, 14, 1)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(103, 168, 14, .6)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(103, 168, 14, .1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                }
            }, {
                name: '整机',
                itemStyle: {
                    normal: {
                        color:  'rgba(243, 193, 0, 1)',
                        // borderColor: 'rgba(103, 168, 14, 1)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(243, 193, 0, .6)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(243, 193, 0, .1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                }
            }]
        },
        yAxisData: [{
            data: signalWeek['全部'] ? signalWeek['全部'].values.map(s => s.value) : [],
        }, {
            data: completeWeek['全部'] ? completeWeek['全部'].values.map(s => s.value) : [],
        }]
    }

    return {
        once: onceProps,
        signalTime: {
            title: '单板实时一次合格率',
            data: [
                {title: '飞旭', percent: signalTime['飞旭'] ? signalTime['飞旭'].values[0].value : 0},
                {title: '统合', percent: signalTime['统合'] ? signalTime['统合'].values[0].value : 0},
                {title: '达创', percent: signalTime['达创'] ? signalTime['达创'].values[0].value : 0},
                {title: '双赢', percent: signalTime['双赢'] ? signalTime['双赢'].values[0].value : 0},
            ]
        },
        completeTime: {
            title: '整机实时一次合格率',
            data: [
                {title: '飞旭', percent: completeTime['飞旭'] ? completeTime['飞旭'].values[0].value : 0},
                {title: '统合', percent: completeTime['统合'] ? completeTime['统合'].values[0].value : 0},
                {title: '达创', percent: completeTime['达创'] ? completeTime['达创'].values[0].value : 0},
                {title: '双赢', percent: completeTime['双赢'] ? completeTime['双赢'].values[0].value : 0},
            ]
        },
        completeTimeAll: {
            title: '整机实时全部一次合格率',
            data: completeTimeAll['全部'] ? completeTimeAll['全部'].values[0].value : 0
        },
        signalTimeAll: {
            title: '单板实时全部一次合格率',
            data: signalTimeAll['全部'] ? signalTimeAll['全部'].values[0].value : 0
        }
    }
}

export default connect(mapStoreToProps)(Stat)